<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
		<head>
			<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
			<title>pro2</title>
			<style type="text/css">
			</style>
		</head>
		<body>
			<div>
				<select style="width:60px" multiple size="10" id="leftID">
					<option>选项A</option>
					<option>选项B</option>
					<option>选项C</option>
					<option>选项D</option>
					<option>选项E</option>
				</select>
			</div>
			<div style="position:absolute;left:100px;top:60px">
				<input type="button" value="批量右移" id="rightMoveID" />
			</div>
			<div style="position:absolute;left:100px;top:90px">
				  <input type="button" value="全部右移" id="rightMoveAllID" />
			</div>
			<div style="position:absolute;left:220px;top:20px">
				  <select multiple size="10" style="width:60px" id="rightID"></select>
			</div>
		</body>
		<script type="text/javascript">
			document.getElementById("rightMoveID").onclick = function() {	/* getElementById获取“批量右移”，并添加onclick */
					var leftList = document.getElementById("leftID");		/* 获取左列表和右列表的引用 */
					var rightList = document.getElementById("rightID");
					var selectedOptions = Array.from(leftList.selectedOptions);/* Array.from将左列表中所有选中的选项转换成数组*/
					// 将选中的项移动到右边列表
					selectedOptions.forEach(function(option) {
						rightList.add(option);								/* 遍历数组，add将选项从左移到右*/
					});
				};

			document.getElementById("rightMoveAllID").onclick = function() {	/* 设置一个onclick事件处理器 */
					var leftList = document.getElementById("leftID");			/* 获取左列表和右列表的引用 */
					var rightList = document.getElementById("rightID");
					var allOptions = Array.from(leftList.options);				/* 将左表中的所有选项转成数组 */

					// 将所有项移动到右边列表
					allOptions.forEach(function(option) {					/* 遍历，add方法将从左表内容移到右表 */
						rightList.add(option);
					});
				};
		</script>
</html>

